const HtmlWebpackPlugin = require('html-webpack-plugin');
//HtmlWebpackPlugin  以某个html 文件作为模板生成新的html文件
//并把打包好的代码引入
const path = require('path');


module.exports = {

  mode: 'production',
  devServer: {
    port: 8888,
  },
  
  // entry 入口
  entry: './src/main.js',
  output: {
    clean: true,
    // 每次打包前清空 dist 目录下的代码
    path: path.join(__dirname, 'dist'),
    //--dirname  当前文件夹的名字，出口路径
    filename: 'bundle.js',//出口文件名
  },
  plugins: [new HtmlWebpackPlugin(
    {
      template: './public/index.html'
      //根据对应的html生成新的html文件
    })],
    module: {
      rules: [
        {
          test: /\.css$/i,
          // css-loader作用是让webpack能够解析css文件
          //style-loader 可以把解析好的样式插入到DOM中
          use: ["style-loader", "css-loader"],
          //数组中的loader使用顺序是从右到左
        },
        {
          test: /\.less$/i,
          use: ["style-loader", "css-loader","less-loader"],
        },
        {
          test: /\.(png|jpg|gif|jpeg)$/i,
          type: 'asset'//asset会把大于8kb的转化为base64
          //把大于8kb的原图片输出
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/i,
          type: 'asset/resource',
          generator: {
            filename:'font/[name].[hash:6][ext]'
          }
        },
        {
        
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env']
                    // 预设:转码规则(用bable开发环境本来预设的)
                }
            }
        }
        
      ],
  },
    
};